import { View } from '@tarojs/components'
import { Dispatch, SetStateAction, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'
import './index.scss'

/**
 * BtFreshList组件属性接口
 * @interface BtFreshListProps
 * @property {Function} requestFc - 请求数据的函数
 * @property {Object} params - 请求参数
 * @property {Function} setListData - 设置列表数据的函数
 * @property {ReactNode} children - 子组件
 * @property {number} [initialPageSize=10] - 初始页大小
 */
interface BtFreshListProps {
  requestFc: any
  params: any
  setListData: Dispatch<SetStateAction<any[]>>
  children: React.ReactNode
  initialPageSize?: number
}

function BtFreshList ({requestFc, setListData, children, initialPageSize = 10, params = {}}: BtFreshListProps, ref) {
  // 组件状态管理
  const [ firstLoading, setFirstLoading] = useState(true)  // 首次加载状态
  const [ isReload, setIsReload ] = useState(false)        // 是否重新加载
  const [ data, setData ] = useState<any[]>([])            // 列表数据
  const [ loading, setLoading ] = useState(false)          // 加载状态
  const [ isLastPage, setIsLastPage ] = useState(false)    // 是否最后一页
  const [ pageSize ] = useState<number>(initialPageSize)   // 每页数量
  const page = useRef<number>(1)                          // 当前页码

  // 同步数据到父组件
  useEffect(() => {
    setListData(data)
  }, [data, setListData])

  /**
   * 查询列表数据
   * @returns {Promise<void>}
   */
  const queryList = async () => {
    if(loading) return
    setLoading(true)
    const res = await requestFc({page: page.current, pageSize, ...params.current})
    let list: any[] = [];
    if (res && res.data && res.data.list) {
      list = res.data.list
    }
    if (page.current !== 1) list = [...data, ...list];
    if(res && res.data && list.length >= res.data.total) setIsLastPage(true)
    setData(list)
    setLoading(false)
    setFirstLoading(false)
  }

  /**
   * 重新加载数据
   * @returns {Promise<void>}
   */
  const reload = async () => {
    setIsLastPage(false)
    page.current = 1
    await queryList()
  }

  /**
   * 请求数据
   * @returns {Promise<void>}
   */
  const request = async () => {
    await queryList()
  }

  /**
   * 加载下一页
   * @returns {Promise<void>}
   */
  const nextPage = async () => {
    if (!isLastPage) {
      page.current = page.current + 1
      await queryList()
    }
  }

  /**
   * 刷新列表
   * @returns {Promise<void>}
   */
  const reFresh = async () => {
    setFirstLoading(true)
    setIsReload(true)
    await reload()
  }

  // 暴露方法给父组件
  useImperativeHandle(ref, () => {
      return {
        request,    // 请求数据
        nextPage,   // 加载下一页
        reFresh     // 刷新列表
      }
    }
  )

  return (
    <>
      { isReload }
      { children }
      {/* 加载更多提示 */}
      { (!isLastPage && !firstLoading && data.length >0 && !loading) &&
        <View className='text'>More page</View>
      }
      {/* 空数据提示 */}
      { (!firstLoading && data.length === 0) &&
        <View className='text'>no data</View>
      }
      {/* 没有更多数据提示 */}
      { (!firstLoading && isLastPage && data.length > 0 && !loading) &&
        <View className='text'>no data</View>
      }
    </>
  )
}

const ChildFun = forwardRef(BtFreshList)
export default ChildFun

